<template>
  <el-container>
    <el-header>
      <HeaderVue />
    </el-header>
    <el-container>
      <el-aside width="auto">
        <AsideVue />
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import AsideVue from '@/components/layout/Aside.vue';
import HeaderVue from '@/components/layout/Header.vue';
import { provide, ref } from 'vue';

const isCollapse = ref(false)
provide("menu-expand", isCollapse)

</script>

<style scoped lang="less">
.el-header {
  background-color: #409eff;
  height: 70px;
}

.el-main {
  height: calc(100vh - 70px);
}

.el-aside {
  background-color: #304156;
  height: calc(100vh - 70px);

  // css3的一个新的控制滚动条样式的伪类选择器
  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>